import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'page-btn',
    styleUrls: ['./components.scss'],
    template: `
        <div class="page_btn_component">
            <div class="btn" (click)="up()">
                <span class="tipNum" *ngIf="upNum">{{upNum}}</span>
                <i class="material-icons" *ngIf="btnType=='up-down'">keyboard_arrow_up</i>
                <i class="material-icons" *ngIf="btnType=='left-right'">keyboard_arrow_left</i>
            </div>
            <div class="btn" (click)="down()">
                <span class="tipNum" *ngIf="downNum">{{downNum}} </span>
                <i class="material-icons" *ngIf="btnType=='up-down'">keyboard_arrow_down</i>
                <i class="material-icons" *ngIf="btnType=='left-right'">keyboard_arrow_right</i>
            </div>
        </div>
    `
})
export class PageBtn {
    @Input() upNum: number;
    @Input() downNum: number;
    @Input() btnType: string;

    @Output() onUp = new EventEmitter<any>();
    @Output() onDown = new EventEmitter<any>();

    up() {
        this.onUp.emit();
    }

    down() {
        this.onDown.emit();
    }
}